본문으로 건너뛰기

Q. React hook에서 클로저가 어떻게 쓰이는지 설명해 주세요.

🧑🏻‍💻 Answer.


✅ React Hook과 클로저

  • React hook에서는 주로 함수형 컴포넌트에서 이전 상태와 현 상태의 변경이 있는지를 감지하기 위해 클로저를 사용합니다.

  • React는 함수형 컴포넌트의 상태관리를 위해서 컴포넌트 외부에 배열 형태로 저장된 값을 사용합니다.

  • 이때 렉시컬 스코프에 의해 함수가 정의된 시점을 기준으로 외부 변수를 참조하는 클로저의 특성을 활용하여, 리렌더링(= 함수 재호출) 시 외부에 배열 형태로 저장된 값에 구별 가능한 키로 접근해 이전 상태와 현재 상태를 비교하고 변경할 수 있게 됩니다.

  • 이처럼 클로저를 사용하면 함수가 호출될 때마다 새로운 스코프를 생성하는 대신 이전 스코프의 변수를 유지할 수 있으므로, 상태를 올바르게 업데이트할 수 있게 됩니다.

  • 참고로 각 컴포넌트의 상태 정보는 순서대로 배열로 저장되기 때문에 상태를 변화시키는 hook을 조건문이나 반복문 안에서 사용하면 잘못된 순서의 값을 참조하게 될 수 있습니다.